<!DOCTYPE html>
<html>
    <head>
        <style>
            #console { margin-top: 40px; }
        </style>
        <script src="../../resources/js-test.js"></script>
    </head>

    <body style="zoom: 1.1">
        <div>
            <canvas style="position: absolute; top: 0px; left: 0px; background-color: black;" width="32" height="32"></canvas>
            <canvas style="position: absolute; top: 0px; left: 32px; background-color: black;" width="32" height="32"></canvas>
            <canvas style="position: absolute; top: 0px; left: 64px; background-color: black;" width="32" height="32"></canvas>
            <canvas style="position: absolute; top: 0px; left: 96px; background-color: black;" width="32" height="32"></canvas>
        </div>

        <script>
            function r(n) {
                return Math.round(n * 1000) / 1000;
            }
            
            var expected = 0;
            var elements = document.getElementsByTagName('canvas');
            for (var el, i = 0; el = elements[i]; i++) {
                var rect = el.getBoundingClientRect();
                if (Math.round(expected) == Math.round(rect.left))
                    testPassed('Left edge of block lines up with right edge of previous block.');
                else
                    shouldBe('Math.round(rect.left)', String(Math.round(expected)));
                expected += rect.width;
            }
        </script>
    </body>
</html>
